<template>
	<view class="service-container">
	
		<view class="service-search">
			<!-- <u-button type="primary" text="退出登录(清除缓存)" @click="clearToken"></u-button> -->
		<u-search placeholder="请输入搜索内容" v-model="keyword" @change='doSearch'></u-search>
		</view>
		
		<view class="service-category">
			<u-subsection :list="categoryList" keyName="applicationCenterCatalogue" :current="curNow" @change="sectionChange" ></u-subsection>
		</view>
		<view class="service-application">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in applicationList" :key="listIndex" @click="applicationClick(listItem.applicationLabel)">
					<u-icon :customStyle="{paddingTop:20+'rpx'}"
						:name="'https://www.gzzyue.com/prod-api'+listItem.applicationLogo" :size="30"></u-icon>
					<text class="grid-text">{{listItem.applicationLabel}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				categoryList: [],
				curNow: 0,
				applicationList: [],
				sourceList: [],
			}
		},
		onLoad() {
			this.getCategory(),
			this.getApplicationList()
		},
		methods: {
			doSearch(){
				
				console.log('value',this.keyword)
				if(this.curNow ===0){
					this.applicationList=this.sourceList.filter(item=>{
						return item.applicationLabel.search(this.keyword)!=-1 
						})
				}else{
					this.applicationList=this.sourceList.filter(item=>{
					return item.applicationLabel.search(this.keyword)!=-1 &&item.applicationId ===this.curNow
			})
				}
				
			},
			sectionChange(index) {
				this.curNow = index;
				console.log('curNow',this.curNow)
				if(index==0){
					this.applicationList=this.sourceList
				}else{
					this.applicationList=this.sourceList.filter(item=>{
					return item.applicationId===index
				})
				}
				
				// console.log('id',this.categoryList[index].id)
				// this.getApplicationList(this.categoryList[index].id)
			},
			getCategory() {
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/center/list',
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('category:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								
								this.categoryList = res.data.rows
								this.categoryList.unshift({id:0,applicationCenterCatalogue:'全部应用'})
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			getApplicationList(index) {
				var param = index>0?'?applicationId='+index:''
				console.log(param)
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/application/list'+param,
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('applicationList:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.applicationList = res.data.rows
								this.sourceList = res.data.rows
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			applicationClick(applicationLabel){
				console.log(applicationLabel)
				switch(applicationLabel){
					case '访客管理':uni.navigateTo({
						url:'/pages/vistor/vistor'
					});break;
					case '校园通知':uni.navigateTo({
						url:'/pages/notice/notice'
					});break;
					case '请假管理':uni.navigateTo({
						url:'/pages/askfor/askfor'
					});break;
					case '离校管理':uni.navigateTo({
						url:'/pages/leave/leave'
					});break;
					case '教师考勤':uni.navigateTo({
						url:'/pages/checking/checking'
					});break;
					case '一卡通':uni.navigateTo({
						url:'/pages/card/card'
					});break;
				}
			},
			// 我的退出登录开始
			// clearToken() {
			//     localStorage.removeItem('token');
			// 	uni.$u.toast("已清除缓存");
			//   }
			// 我的退出登录结束
		},



	}
</script>

<style lang="scss" scoped>
.service-container{
	.service-search{
		padding: 10px;
	}
	.service-category{
		padding: 10px;
	}
	.service-application{
		
		.tuijian{
			padding:0px 0 5px 5px;
			border-bottom: 1px solid #d1d1d1;
			
		}
		.grid-text {
			font-size: 12px;
		}
	}
}
</style>
